<template>
    <div class="users">

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">
                <div class="users-container">
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        v-loading="loading"
                        >
                        <el-table-column
                            prop="unid"
                            label="unid">
                        </el-table-column>
                        <el-table-column
                            prop="username"
                            label="用户名">
                        </el-table-column>
                        <el-table-column
                            prop="nickname"
                            label="昵称">
                        </el-table-column>
                        <el-table-column
                            prop="vipLevel"
                            label="vip等级">
                        </el-table-column>
                        <el-table-column
                            
                            label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" size='mini'  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size='mini' @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        </el-tabs>
       
    </div>
</template>


<script>
    import * as api from '@/api/users'
    export default {
        meta:{
            title:'yhgl',
            name:'用户管理',
            icon:'iconfont icon-yonghu',
        },
    
        data() {
            return {
            tableData: [
                // {
                //     date: '2016-05-02',
                //     name: '王小虎',
                //     address: '上海市普陀区金沙江路 1518 弄'
                // }, {
                //     date: '2016-05-04',
                //     name: '王小虎',
                //     address: '上海市普陀区金沙江路 1517 弄'
                // }, {
                //     date: '2016-05-01',
                //     name: '王小虎',
                //     address: '上海市普陀区金沙江路 1519 弄'
                // }, {
                //     date: '2016-05-03',
                //     name: '王小虎',
                //     address: '上海市普陀区金沙江路 1516 弄'
                // }
            ],
                 activeName: 'first',
                 loading:true
            }
        },
        methods: {
            handleEdit(index, row) {
                // console.log(index, row);
            },
            handleDelete(index, row) {
                // console.log(index, row);
                this.tableData.splice(index,1)
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        mounted(){
            api.getAllusers()
            .then(res=>{
                console.log('用户',res);
                if(res.data.state){
                    this.loading = false
                    this.tableData = res.data.data
                }
            })
        }
    }
  </script>


<style lang='less' scoped>
    .users-container{
        /deep/.el-table__header-wrapper{
            line-height: 40px;
        }
        /deep/.cell{
            text-align: center;
        }

    }
    /deep/.el-tabs__nav-scroll{
        margin-top: 30px;
        line-height: 40px;
    }
</style>